<style lang="scss" scoped>
#cmain {
    .cmain-content {
        width: 100%;
        height: 100%;
        background-color: #fff;
        padding: 10px 30px 30px 30px;
        font-family: Roboto;
        box-shadow: 0 0 10px 0 #cfcfcf;
        border-radius: 10px;
        .button-menu {
            width: 100%;
            padding-bottom: 15px;
            .btnNormal {
                float: right;
                button+button {
                    margin-left: 10px;
                }
                .download {
                    padding: 2px 25px;
                    border-radius: 20px;
                    margin-left: 10px;
                    background-color: #4578ad;
                    border-color: #4578ad;
                    color: #fff;
                    display: inline-block;
                    margin-bottom: 0;
                    font-weight: normal;
                    text-align: center;
                    vertical-align: middle;
                    touch-action: manipulation;
                    cursor: pointer;
                    background-image: none;
                    border: 1px solid transparent;
                    white-space: nowrap;
                    line-height: 1.5;
                    user-select: none;
                    font-size: 14px;
                    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
                    &:hover {
                        background-color: #6a93bd;
                        border-color: #6a93bd;
                    }
                }
                .disdownload {
                    padding: 2px 25px;
                    border-radius: 20px;
                    margin-left: 10px;
                    background-color: #ccc;
                    border-color: #ccc;
                    color: #fff;
                    display: inline-block;
                    margin-bottom: 0;
                    font-weight: normal;
                    text-align: center;
                    vertical-align: middle;
                    touch-action: manipulation;
                    cursor: pointer;
                    background-image: none;
                    border: 1px solid transparent;
                    white-space: nowrap;
                    line-height: 1.5;
                    user-select: none;
                    font-size: 14px;
                    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
                }
            }
            button {
                padding: 2px 25px;
                border-radius: 20px;
            }
        }
        .content {
            padding: 30px;
            form {
                &>div {
                    min-height: 57px;
                    display: flex;
                    .ivu-form-item {
                        float: left;
                        flex: 1;
                        .ivu-date-picker {
                            width: 100%;
                        }
                    }
                }
            }
            h1 {
                text-align: center;
                color: #101010;
                margin: 20px auto;
            }
            h2 {
                color: #666666 100%;
                margin: 10px auto;
            }
            p {
                line-height: 28px;
            }
        }
    }
}
</style>

<template>
    <div id="cmain">
        <div class="cmain-content">
            <div class="button-menu">
                <div class="btnNormal" v-show="buttonShow">
                    <Button type="ghost" @click="goHome">返回</Button>
                    <Button type="primary" @click="editReport">编辑</Button>
                    <Button type="primary" @click="generationflag">生成报告</Button>
                    <a href='javascript:;' @click="reportdown" class='download'>下载报告</a>
                </div>
                <div class="btnNormal" v-show="!buttonShow">
                    <Button type="ghost" @click="CancelEdit">取消</Button>
                    <Button type="primary" >保存</Button>
                </div>
            </div>
            <div class="content">
                <Form :model="patientInfo" :label-width="102">
                    <div>
                        <FormItem label="患者姓名：">
                            <Input v-model="reportdata.dchPatient.patientname" :disabled="inputShow"></Input>
                        </FormItem>
                        <FormItem label="年龄：">
                            <Input v-model="reportdata.dchPatient.age" :disabled="inputShow"></Input>
                        </FormItem>
                        <FormItem label="性别：">
                            <Input v-model="reportdata.dchPatient.sex" :disabled="inputShow"></Input>
                        </FormItem>
                    </div>
                    <div>
                        <FormItem label="民族：">
                            <Input v-model="reportdata.dchPatient.nation" :disabled="inputShow"></Input>
                        </FormItem>
                        <FormItem label="出生日期：">
                            <DatePicker type="date" v-model="reportdata.dchPatient.birthday" :disabled="inputShow" :readonly='inputShow'></DatePicker>
                        </FormItem>
                        <FormItem label="样本编号：">
                            <Input v-model="reportdata.sample.samplecode" :disabled="inputShow"></Input>
                        </FormItem>
                    </div>
                    <div>
                        <FormItem label="样本类型：">
                            <Input v-model="reportdata.sample.sampletype" :disabled="inputShow"></Input>
                        </FormItem>
                        <FormItem label="病人编号：">
                            <Input v-model="reportdata.dchPatient.patientcode" :disabled="inputShow"></Input>
                        </FormItem>
                        <FormItem label="接收日期：">
                            <DatePicker type="date" v-model="reportdata.sample.receivedate" :disabled="inputShow" :readonly='inputShow'></DatePicker>
                        </FormItem>
                    </div>
                    <div>
                        <FormItem label="送检单位：">
                            <Input disabled></Input>
                        </FormItem>
                        <FormItem label="家庭编号：">
                            <Input disabled></Input>
                        </FormItem>
                        <FormItem label="报告日期：">
                            <DatePicker type="date" disabled readonly></DatePicker>
                        </FormItem>
                    </div>
                    <div>
                        <FormItem label="门诊号/住院号：">
                            <Input disabled></Input>
                        </FormItem>
                        <FormItem label="送检医生：">
                            <Input disabled></Input>
                        </FormItem>
                        <FormItem label="报告版本：">
                            <Input disabled></Input>
                        </FormItem>
                    </div>

                </Form>
                <hr/>
                <h1>检测项目和检测结果</h1>
                <h2>症状描述与临床诊断</h2>
                <Input type="textarea" v-model="reportdata.dchPatient.clinicalinf" :autosize="true" :disabled="inputShow"></Input>
                <h2>检测项目</h2>

                <h2>检测结果</h2>
                <h2>结果解读</h2>
                <div class='report-table'>
               
                    <el-table :data="rowData" border style="width:100%;" max-height="200">
                        <el-table-column label="基因" prop="ref_Gene">
                        </el-table-column>
                        <el-table-column label="染色体位置" prop="chrAndRef_Pos">
                        </el-table-column>
                        <el-table-column label="基因突变信息" prop="naChange">
                        </el-table-column>
                        <el-table-column label="合子类型" prop="genoType">
                        </el-table-column>
                        <el-table-column label="变异来源" prop="ref_Gene">
                        </el-table-column>
                        <el-table-column label="疾病名称/phenotype" prop="disease">
                        </el-table-column>
                        <el-table-column label="遗传模式" prop="phenotype_Mim">
                        </el-table-column>
                        <el-table-column label="变异评级" prop="pathogenicity">
                        </el-table-column>
                    </el-table>
                </div>

                <h2>实验室声明</h2>
                <p>全外显子组测序数据量大，结果的分析依赖于临床提供的病史信息、 现有的数据库信息和已发表的文献资料，本检测结果只对本次受检样本负责， 仅报告与检测项目疾病表型相关的突变结果，供临床医生参考。</p>

                <h2>检测方法的局限性声明</h2>
                <p>1.采用全外显子组捕获高通量测序技术，仅对基因编码区域进行测序，数据平均覆盖XX。本方法不能完全覆盖重复区域、富含GC区域、假基因区域等。</p>
                <p>2.本方法适用于点突变及小片段插入缺失突变，不适用于基因大片段拷贝数变异、动态突变及复杂重组等特殊类型突变的检测，也不适用于检测基因组结构变异、大片段插入突变及位于基因调节区及内含子区的突变。</p>
                <p>3.对于非明确致病性变异，请结合临床，不宜直接作为临床决策的依据。</p>
                <p>4.本检测中不会报告所有识别的变异，仅报告已知致病基因中有证据表明能够引起疾病的变异。对于良性或疑似良性的变异不会报告。</p>
                <p>5.本方法应用的DNA源自受检者或体细胞，因此不能排除嵌合现象所致的解读偏差。</p>
                <p>6.本检测基于假设患儿父母亲均为生物学父母亲，且本报告不涉及血亲关系。</p>
                <p>7.本检测结果仅报告与申请时的临床症状相符的致病突变。对于肿瘤、成年期起病、复杂疾病等的基因突变不在本报告范围内。</p>
                <p>8.本检测发现的与患儿目前表型不符的，但有潜在随访意义的位点将放在附表中，供临床医生参考。</p>
                <p>9.鉴于目前人类对疾病认识水平的局限性，DNA序列分析的目的是了解疾病发病原因或评估遗传风险，如未检出特定基因的致病突变位点，即为阴性结果，但这并不能排除患某种疾病的可能性，仍然存在其它未知基因或难以检测到、或无法确定的基因突变类型或非遗传因素参与其中。</p>
                <p>10.由于目前对某些基因认识的不足，对检出的特定基因突变，在某些情况下，可能并非引起该病的致病基因突变，需要进一步进行验证和研究。</p>
                <p>11. 本检测技术及相关仪器并非常规临床检测项目，目前主要用于辅助临床诊断或科研等相关目的。此外，任何基因检测实验，都存在极小概率（&lt;5%）错误发生的风险。本检测结果需经临床医师结合各方面情况进行综合判断。</p>

                <h1>报告附件</h1>

                <h2>检测方法</h2>
                <p>
                    高通量测序采用平台，与人类参考基因组序列比对，[N/A]%的目标捕获区域测序深度大于 20X。分析采用DCH PM Analysis Platform的遗传病分析软件, 用于发现与病人表型相关的致病基因及具有临床意义的遗传变异。
                </p>
                <h2>二级分析流程</h2>
                <p>
                    测序片段通过BWA软件（版本：0.7.9a）[Li et al]与UCSC hg19参考基因组进行比对。比对结果采用Picard（版本：1.115）（或者Biobambam，v2.0.8）软件去除PCR重复序列，然后进行下游的数据分析。变异检测采用 GATK（Genome Analysis Tool Kit， 版本：v3.2）软件进行 [McKenna A. et al, Genome Res. 2010 Sep; 20(9)]， 包括： 采用碱基质量分数校正， InDels位置和质量分数校正，SNVs和InDels变异发现和分型 [DePristo M. et al. Nature Genetics. 2011 Apr; 43(5)]。
                </p>
                <h2>变异注释和筛选流程</h2>
                <p>
                    变异采用神州数码医疗科技股份有限公司开发的流程进行注释。此外每个碱基的测序深度从所有基因组测序数据中获得。变异采用SnpEff软件进行注释，其中功能性的编码区和剪接位点的变异将进入下一步分析，主要包括功能缺失型变异（获得终止密码子的突变，移码突变和关键剪接位点突变）、错义突变、非移码的缺失／插入。这些突变均预测为具有很高或较高的功能影响。 三个主要的收录已知或疑似致病突变的数据库，包括ClinVar, OMIM 和HGMD将用于筛选已知的致病突变，同时采用多种工具预测错义突变的功能以及非编码调控序列的注释等等。 五个基于人群的大规模测序数据库用于排除在正常人群中具有较高频率的变异， 包括ExAC数据库、千人基因组计划、CONVERGE (汉族)、ESP (非裔美国人)、ESP (欧洲美国人)。
                </p>
                <h2>检测结果解读</h2>
                <p>
                    每个变异将使用神州数码医疗科技股份有限公司开发和验证过的精准医学分析平台进行评估，并依据美国医学遗传学与基因组学学会（ACMG）发布的<a target="_blank" :href='pdfurl'>《序列变异解读标准和指南》</a>对每个变异进行分类。序列变异使用HGVS命名法。与送检临床指征相关的致病基因中发现的致病、疑似致病或意义不明确的变异将在主要发现中报告。
                </p>
                <h2>本报告依据以下表型</h2>
                <p>
                    基于送检的临床表型，选用以下人类表型标准术语（Human Phenotype Ontology, HPO）和／或在线孟德尔遗传（Online Mendelian Inheritance in Man, OMIM）术语以筛选合适候选致病基因：
                </p>
                <p>"Mental retardation", "Unable to speak". </p>
            </div>
        </div>
    </div>
</template>

<script>
// http://14.18.42.211
// 192.168.165.63
// 10.131.101.142
import {pdfUrl} from '@/common/js/Base.js'
import { setCookie, getCookie, delCookie } from '@/common/js/cookie.js';
import { data } from "api/index.js";
export default {
    name: "report",
    data() {
        return {
            pdfurl:pdfUrl.pdfurl,
            buttonShow: true,
            inputShow: true,
            patientInfo: {},
            rowData: [],
            downurl: '',
            reportid:'',
            downs: false,
            reportdata: {
                dchPatient: {},
                sample: {}
            }
        }
    },
    methods: {
        reportdown(){
            let obj={
                reportid:this.reportid
            }
            data.downloadMyReport(obj).then((res)=>{
                if(res.returnCode==0 || res.returnCode==200){
                    this.downurl=res.data;
                    this.downloadFile(this.downurl);
                }
            })
        },
        downloadFile(url) {
            try{
                var elemIF = document.createElement('iframe');
                elemIF.src = url;
                elemIF.style.display = 'none';
                document.body.appendChild(elemIF);
                // 防止下载两次
                setTimeout(function() {
                   document.body.removeChild(elemIF)
                }, 1000);
            }catch(e){
                console.log(e);
            }
        },
        goHome() {
            if(this.$store.state.productId==1){
                this.$router.push("/rare");
            }else if(this.$store.state.productId==2){
                this.$router.push("/tumor");
            }
        },
        editReport() {
            this.buttonShow = false;
            this.inputShow = false;
        },
        CancelEdit() {
            this.buttonShow = true;
            this.inputShow = true;
        },
        generationflag(){
            let obj={
                patientid: this.$store.state.patientid,
            }
            data.generationflag(obj).then((res)=>{
                if(res.returnCode==0){
                    this.getReport()
                }else if(res.returnCode==1){
                    var _this = this;
                    this.$Modal.confirm({
                        title: '确认提示',
                        content: '<p>报告已存在，是否重新生成报告?</p>',
                        onOk:()=>{
                            this.getReport();
                        }
                    });
                }else{
                    this.$Message.error(res.msg)
                }
            })
        },
        getReport() {
            let obj = {
                patientid: this.$store.state.patientid,
                userid: getCookie("userid"),
                productId: this.$store.state.productId,
                workflowid: ''
            }
            data.getreportbyword(obj).then((res) => {
                if (res.returnCode == 0 || res.returnCode == 200) {
                    this.reportid = res.data;
                } else {
                    this.$Message.error(res.msg)
                }
            })
        }
    },
    mounted() {
        let obj = {
            patientid: this.$store.state.patientid,
            type:this.$store.state.reportFlag,
            userid:getCookie("userid")
        };
        data.getReport(obj).then((res )=> {
            console.log(res);
            if (res.returnCode == 0 || res.returnCode == 200) {
                this.reportdata = res.data;
                if( res.data.documents!=null){
                    this.rowData = res.data.documents;
                }
            } else {
                this.$Message.error(msg);
            }
        }).catch(error => {
            console.log(error)
            this.$Message.error(error);
        })
    }
}
</script>


